<extend name="Index/index" />

<block name="link">
    <title>Store</title>
    <meta charset="utf-8">
    <link href="__PUBLIC__/store_public/css/global_schinese.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/publicheader.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/storeheader.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/store.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/store_featured.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/buttons.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/valvefooter.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/store1.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/store_public/css/cart.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <style>
        .rank0{background-image: linear-gradient(rgb(176, 195, 217), rgb(38, 42, 45)), linear-gradient(rgb(176, 195, 217), rgb(38, 42, 45)); border-top-color: rgb(176, 195, 217);}
        .rank5{background-image: linear-gradient(rgb(176, 195, 217), rgb(38, 42, 45)), linear-gradient(rgb(176, 195, 217), rgb(38, 42, 45)); border-top-color: rgb(176, 195, 217);}
        .rank1{background-image: linear-gradient(rgb(75, 105, 255), rgb(38, 42, 45)), linear-gradient(rgb(75, 105, 255), rgb(38, 42, 45)); border-top-color: rgb(75, 105, 255);}
        .rank2{background-image: linear-gradient(rgb(173, 229, 92), rgb(38, 42, 45)), linear-gradient(rgb(173, 229, 92), rgb(38, 42, 45)); border-top-color: rgb(173, 229, 92);}
        .rank3{background-image:linear-gradient(rgb(136, 71, 255), rgb(38, 42, 45)), linear-gradient(rgb(136, 71, 255), rgb(38, 42, 45)); border-top-color: rgb(136, 71, 255);}
        .rank4{background-image: linear-gradient(rgb(211, 44, 230), rgb(38, 42, 45)), linear-gradient(rgb(211, 44, 230), rgb(38, 42, 45)); border-top-color: rgb(211, 44, 230);}
        .portrait{background-size: 80px 46px;background-repeat: no-repeat;width: 80px;height: 46px;padding-top: 10px;}
        .name{font-size: 18px;line-height: 22px;color: #beb7b4;margin-bottom: 6px;}
        .rarity{font-size: 18px;color: #071215;font-family: Arial;}
        .rarityCell {height: 24px;margin: 12px 0px 12px -12px;width: 304px;}
        /*传说*/
        .rarityLegendary{background: linear-gradient(to right, #8b1d98 0%,#d32ce6 36%,#d32ce6 64%,#8b1d98 100%);}
        /*神话*/
        .rarityMythical{background: linear-gradient(to right, #5b2faa 0%,#8847ff 36%,#8847ff 64%,#5b2faa 100%);}
        /*至宝*/
        .rarityArcana{background: linear-gradient(to right, #759a3e 0%,#ade55c 36%,#ade55c 64%,#759a3e 100%);}
        /*稀有*/
        .rarityRare{background: linear-gradient(to right, #273dad 0%,#395aff 36%,#395aff 64%,#273dad 100%);}
        /*普通*/
        .rarityCommon{background: linear-gradient(to right, #8694a5 0%,#b0c3d9 36%,#b0c3d9 64%,#8694a5 100%);}
    </style>
</block>

<block name="main">
    </head>

    <body class="MainBackgroundImage">
        <div class="StorePageBody" class="Hidden">
            <!-- StoreContainer start -->
            <div class="StoreContainer">
                <div class="StoreContainerBg"></div>
                <div id="StoreTabs">
                    <span id="StoreTabButtons">
                        <a href="<{:U('Home/Store/index')}>" class="StoreTab DarkGrayButton NoSelect StoreTabMenuButton ">主打</a>
                        <a href="<{:U('Home/Store/list?list=1')}>" <if condition="$mark eq 1">class="StoreTab NoSelect  StoreTabActive GrayButton"<else />class="StoreTab DarkGrayButton NoSelect StoreTabMenuButton" 
                        </if>>英雄套装</a>
                        <a href="<{:U('Home/Store/list?list=2')}>"  <if condition="$mark eq 2">class="StoreTab NoSelect  StoreTabActive GrayButton"<else />class="StoreTab DarkGrayButton NoSelect StoreTabMenuButton"
                        </if>>
                        物品</a>
                        <a href="<{:U('Home/Store/list?list=3')}>"  <if condition="$mark eq 3">class="StoreTab NoSelect  StoreTabActive GrayButton"<else />class="StoreTab DarkGrayButton NoSelect StoreTabMenuButton" 
                        </if>>职业商店</a>
                        <span class="LowerBg"></span>
                    </span>
                    <span class="StoreTabPadding"></span>
                    <div id="StoreSearchForm">
                        <form action="<{:U('Home/Store/list?list=search')}>" method="post" name="form1" id="form1">
                        <input type="text" id="StoreSearchInput" autocomplete="off" spellcheck="false" placeholder="搜索" name="search"/>
                    </form>
                    <div id="storeSearchButton" class="glyphicon glyphicon-search" style="position: absolute;top: 5px;right: 5px;width: 19px;height: 19px;background-image: url(http://cdn.dota2.com.cn/apps/dota2/images/store/icon_search.png?1);background-size: 19px 19px;background-repeat: no-repeat;pointer-events: none;font-family: Arial;"></div>
                    </div>

                    <div id="CartButton" class="NoSelect CartHeaderButton NoItems">
                        <span id="CartButtonText" class="">
                            <div id="CartButtonTextIcon"></div>
                            <a href="<{:U('Home/Store/cart')}>">购物车</a>
                        </span>
                        </span>
                    </div>
                </div>

                <!-- ContentContainer  start -->
                <div id="ContentContainer">
                    <!-- Featured start -->
                    <div id="Featured" class="Hidden" style="display: block;">
                        <div id="Cart">
                            <center>
                            <div class="checkout_content" style="width:600px;">
                                <h2 class="approvetxn_header"><span style="margin-left:-328px;">您的购物车</span> <a class="NoSelect GreenButton SlimButton ContinueShoppingButton" href="<{:U('Home/Store/index')}>"> 继续购物 </a> </h2> 
                            </div>
                            <div class="approvetxn_lineitem_container" style="width:600px;">
                                <div class="bg"></div>
                                <table class="cart_table" cellpadding="0" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th width="96">物品</th>
                                            <th></th>
                                            <th width="55"></th>
                                            <th width="55" style="text-align: center;">数量</th>
                                            <th width="100">价格</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <volist name="cartlist" id="vo">
                                        <tr>
                                            <td>
                                                <a class="approvetxn_lineitem_description" href="#">
                                                    <img width="96" height="64" src="/Uploads/Store/<{$vo.g_icon}>" />
                                                </a>
                                            </td>
                                            <td> <a class="approvetxn_lineitem_description" href="#"><{$vo.g_name}></a> 
                                            </td>
                                            <td>
                                                <input type="hidden" value="<{$vo.c_id}>">
                                                <button class="CartLink btn btn-danger btn-sm" tabindex="9999">移除</button> 
                                            </td>
                                            <td  style="text-align: center">
                                                <input type="hidden" value="<{$vo.g_id}>">
                                                <input class="cart_qty" tabindex="0" autocomplete="off" maxlength="2" type="text" name="" value="<{$vo.cg_num}>" style="width:30px;padding:1px;border: 1px solid #82807c;border-width: 1px;margin:5px 0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#ffffff;background: #4d4b49;text-align:center;">
                                            </td>
                                            <td><{$vo.price}> 刀币</td>
                                        </tr>
                                    </volist>
                                        <tr class="subtotal">
                                            <td style="text-align: right" colspan="4">小计：</td>
                                            <td style="text-align: right" id="review_subtotal_value"><{$sum}> 刀币</td>
                                        </tr>
                                        <tr class="WalletBalance">
                                            <td style="text-align: right" colspan="4">可用余额</td>
                                            <td style="text-align: right" id="WalletBalanceValue"><{$coin}> 刀币</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="CheckoutButtonContainer" data-toggle="modal" data-target="#myModal">
                                <div id="CheckoutButton" class="NoSelect GreenButton BigButton CheckoutButton" onclick="Recharge()">
                                    购买
                                </div>
                                <div id="CheckoutSpinner"></div>
                            </div></center>
                        </div>

                    </div>
                    <!-- Featured end -->
                </div><!-- ContentContainer  end -->
             <!-- Modal -->
            <div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="position: fixed; z-index: 9999; top: 180px; left: 15px;">
                <div class="modal-dialog">
                    <center>
                        <div class="modal-content" style="background-image: url(http://cdn.dota2.com.cn/apps/dota2/images/store/bg_modal.jpg);width: 458px;height: 216px;">
                            <div id="CartConfirmModalSuccess" style="display: block;">
                                <h2 style="margin: 0;padding: 36px 0 12px 0;font-size: 20px;font-weight: normal;color: #c6c6c6;">购买成功。</h2>
                                <p style="padding: 10px 0 13px 0;;"></p>
                                <div class="GreenButton BigButton ModalConfirmButton" onclick="CloseCartConfirmDlg();" data-dismiss="modal">前去查看</div>
                            </div>
                        </div>
                    </center>
                </div>
            </div>
            </div><!-- StoreContainer end -->
            <div class="ValveFooter"></div>
        </div>
        <!-- StorePageBody end -->
        
        <script>
            $('#StoreSearchInput').blur(function(){
                document.form1.submit();
            });

           $('.cart_qty').blur(function(){
                var num = $(this).val();
                var gid = $(this).prev().val();
                $.ajax({
                    type: 'post',
                    url: '<{:U("Home/Cart/editCart")}>',
                    data: 'gid='+gid+'&num='+num,
                    dataType: 'json',
                    async: false,
                    success:function(msg){
                        $('#review_subtotal_value').html(msg+' 刀币');
                    }
                });
           });

            function Recharge(){
                var coin = parseInt($('#review_subtotal_value').html());
                var sum = parseInt($('#WalletBalanceValue').html());
                if(coin > sum){
                    $('.modal-content').empty();
                            $('.modal-content').html('<h2 style="margin: 0;padding: 36px 0 12px 0;font-size: 20px;font-weight: normal;color: #c6c6c6;">刀币不足</h2><p style="padding: 10px 0 13px 0;"></p><div class="GreenButton BigButton ModalConfirmButton" data-dismiss="modal" onclick="CloseCartConfirmDlg();">前去充值</div>');
                }else{
                    var t = Math.floor(Math.random()*1000000);
                    $.ajax({
                        type: 'post',
                        url: '<{:U("Home/Order/addOrder")}>',
                        data: 't='+t+'&coin='+coin
                    });
                }
            }

            function CloseCartConfirmDlg(){
                var url = "<{:U('Home/User/index')}>";
                window.location = url;
            }

            $('.CartLink').click(function cartSum(){
                var cid = $(this).prev().val();
                var num1 = parseInt($(this).parent().next().next().html());
                var num2 = parseInt($('#review_subtotal_value').html());
                sum = num2 - num1;
                $('#review_subtotal_value').html(sum+' 刀币');
                $(this).parents('tr').remove();
                $.ajax({
                    type:'post',
                    url: "<{:U('Home/Cart/delCart')}>",
                    data: 'cid='+cid
                });
            });  
        </script>
</block>
</body>

</html>